<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>CSS3鼠标悬停图片动画DEMO演示01</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/set1.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<div class="container">

	<header class="codrops-header">
		<h1>鼠标悬停</h1>
		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">Set 1</a>
			<a href="index2.html">Set 2</a>
		</nav>
	</header>
	
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<div class="content">
	
		<h2>Lily</h2>
		<div class="grid">
			<figure class="effect-lily">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-lily">
				<img src="img/1.jpg" alt="img1"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Sadie</h2>
		<div class="grid">
			<figure class="effect-sadie">
				<img src="img/2.jpg" alt="img02"/>
				<figcaption>
					<h2>Holy <span>Sadie</span></h2>
					<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-sadie">
				<img src="img/14.jpg" alt="img14"/>
				<figcaption>
					<h2>Holy <span>Sadie</span></h2>
					<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Honey</h2>
		<div class="grid">
			<figure class="effect-honey">
				<img src="img/4.jpg" alt="img04"/>
				<figcaption>
					<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-honey">
				<img src="img/5.jpg" alt="img05"/>
				<figcaption>
					<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Layla</h2>
		<div class="grid">
			<figure class="effect-layla">
				<img src="img/6.jpg" alt="img06"/>
				<figcaption>
					<h2>Crazy <span>Layla</span></h2>
					<p>When Layla appears, she brings an eternal summer along.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-layla">
				<img src="img/3.jpg" alt="img03"/>
				<figcaption>
					<h2>Crazy <span>Layla</span></h2>
					<p>When Layla appears, she brings an eternal summer along.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Zoe</h2>
		<div class="grid">
			<figure class="effect-zoe">
				<img src="img/25.jpg" alt="img25"/>
				<figcaption>
					<h2>Creative <span>Zoe</span></h2>
					<p class="icon-links">
						<a href="#"><span class="icon-heart"></span></a>
						<a href="#"><span class="icon-eye"></span></a>
						<a href="#"><span class="icon-paper-clip"></span></a>
					</p>
					<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
				</figcaption>			
			</figure>
			<figure class="effect-zoe">
				<img src="img/26.jpg" alt="img26"/>
				<figcaption>
					<h2>Creative <span>Zoe</span></h2>
					<p class="icon-links">
						<a href="#"><span class="icon-heart"></span></a>
						<a href="#"><span class="icon-eye"></span></a>
						<a href="#"><span class="icon-paper-clip"></span></a>
					</p>
					<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Oscar</h2>
		<div class="grid">
			<figure class="effect-oscar">
				<img src="img/9.jpg" alt="img09"/>
				<figcaption>
					<h2>Warm <span>Oscar</span></h2>
					<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-oscar">
				<img src="img/10.jpg" alt="img10"/>
				<figcaption>
					<h2>Warm <span>Oscar</span></h2>
					<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Marley</h2>
		<div class="grid">
			<figure class="effect-marley">
				<img src="img/11.jpg" alt="img11"/>
				<figcaption>
					<h2>Sweet <span>Marley</span></h2>
					<p>Marley tried to convince her but she was not interested.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-marley">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<h2>Sweet <span>Marley</span></h2>
					<p>Marley tried to convince her but she was not interested.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Ruby</h2>
		<div class="grid">
			<figure class="effect-ruby">
				<img src="img/13.jpg" alt="img13"/>
				<figcaption>
					<h2>Glowing <span>Ruby</span></h2>
					<p>Ruby did not need any help. Everybody knew that.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-ruby">
				<img src="img/14.jpg" alt="img14"/>
				<figcaption>
					<h2>Glowing <span>Ruby</span></h2>
					<p>Ruby did not need any help. Everybody knew that.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Roxy</h2>
		<div class="grid">
			<figure class="effect-roxy">
				<img src="img/15.jpg" alt="img15"/>
				<figcaption>
					<h2>Charming <span>Roxy</span></h2>
					<p>Roxy was my best friend. She'd cross any border for me.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-roxy">
				<img src="img/1.jpg" alt="img01"/>
				<figcaption>
					<h2>Charming <span>Roxy</span></h2>
					<p>Roxy was my best friend. She'd cross any border for me.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Bubba</h2>
		<div class="grid">
			<figure class="effect-bubba">
				<img src="img/2.jpg" alt="img02"/>
				<figcaption>
					<h2>Fresh <span>Bubba</span></h2>
					<p>Bubba likes to appear out of thin air.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-bubba">
				<img src="img/16.jpg" alt="img16"/>
				<figcaption>
					<h2>Fresh <span>Bubba</span></h2>
					<p>Bubba likes to appear out of thin air.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Romeo</h2>
		<div class="grid">
			<figure class="effect-romeo">
				<img src="img/17.jpg" alt="img17"/>
				<figcaption>
					<h2>Wild <span>Romeo</span></h2>
					<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-romeo">
				<img src="img/18.jpg" alt="img18"/>
				<figcaption>
					<h2>Wild <span>Romeo</span></h2>
					<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Dexter</h2>
		<div class="grid">
			<figure class="effect-dexter">
				<img src="img/19.jpg" alt="img19"/>
				<figcaption>
					<h2>Strange <span>Dexter</span></h2>
					<p>Dexter had his own strange way. You could watch him training ants.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-dexter">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<h2>Strange <span>Dexter</span></h2>
					<p>Dexter had his own strange way. You could watch him training ants.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Sarah</h2>
		<div class="grid">
			<figure class="effect-sarah">
				<img src="img/13.jpg" alt="img13"/>
				<figcaption>
					<h2>Free <span>Sarah</span></h2>
					<p>Sarah likes to watch clouds. She's quite depressed.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-sarah">
				<img src="img/20.jpg" alt="img20"/>
				<figcaption>
					<h2>Free <span>Sarah</span></h2>
					<p>Sarah likes to watch clouds. She's quite depressed.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Chico</h2>
		<div class="grid">
			<figure class="effect-chico">
				<img src="img/15.jpg" alt="img15"/>
				<figcaption>
					<h2>Silly <span>Chico</span></h2>
					<p>Chico's main fear was missing the morning bus.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-chico">
				<img src="img/4.jpg" alt="img04"/>
				<figcaption>
					<h2>Silly <span>Chico</span></h2>
					<p>Chico's main fear was missing the morning bus.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Milo</h2>
		<div class="grid">
			<figure class="effect-milo">
				<img src="img/11.jpg" alt="img11"/>
				<figcaption>
					<h2>Faithful <span>Milo</span></h2>
					<p>Milo went to the woods. He took a fun ride and never came back.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-milo">
				<img src="img/3.jpg" alt="img03"/>
				<figcaption>
					<h2>Faithful <span>Milo</span></h2>
					<p>Milo went to the woods. He took a fun ride and never came back.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
	</div>
	
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<nav class="codrops-demos">
		<a class="current-demo" href="index.html">Set 1</a>
		<a href="index2.html">Set 2</a>
	</nav>

</div><!-- /container -->
<script type="text/javascript">
// For Demo purposes only (show hover effect on mobile devices)
[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
	el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
} );
</script>

</body>
</html>